<template>
	<scroll-view class="member-center" scroll-y @touchstart="handleTouchStart" @touchmove="handleTouchMove"
		@touchend="handleTouchEnd">
		<view class="search-container" :style="{ paddingTop: bgHeight + 'px' }">
			<view class="search-header">
				<view class="back-icon" @click="goback">
					<tn-icon name="left"></tn-icon>
				</view>
				<view class="search-input-box">
					<tn-input v-model="searchText" placeholder="Search" :border="false" prefixIcon="search"
						@click="showSearch" :clearable="true" @input='showSearch'></tn-input>
					<view class="search-btn" @click="showSearchResult">{{ t('common.search') }}</view>
				</view>
			</view>

			<view class="" v-if="isShowProduct" style="margin-top: -20rpx;">
				<view class="category-tabs">
					<view class="tab active">{{ t('common.all') }}</view>
					<view class="tab">{{ t('common.foodHealth') }}</view>
					<view class="tab">{{ t('common.beautyPersonal') }}</view>
					<view class="tab">
						<tn-icon name="menu" size="24"></tn-icon>
					</view>
				</view>
				<scroll-view scroll-x class="sub-category-tabs">
					<view class="sub-tab active">{{ t('common.match') }}</view>
					<view class="sub-tab">{{ t('common.Sales') }}</view>
					<view class="sub-tab">
						{{ t('common.Com') }}
						<tn-icon name="arrow-down" size="16"></tn-icon>
					</view>
					<view class="sub-tab">
						{{ t('common.Com') }}
						<tn-icon name="arrow-down" size="16"></tn-icon>
					</view>
					<view class="sub-tab">
						{{ t('common.Advanced') }}
						<tn-icon name="arrow-down" size="16"></tn-icon>
					</view>
				</scroll-view>
				<view class="product-grid">
					<view class="product-card" v-for="(product, index) in products" :key="index">
						<view class="product-image">
							<image :src="product.image" mode="aspectFill"></image>
						</view>
						<view class="product-info">
							<view class="commission-info">
								<text>High Commissions 9%</text>
							</view>

							<view class="earnings">
								<text>Earn 30.240đ-32.850đ</text>
							</view>

							<view class="product-code">
								<text>MQ1 - [MEGA JUMBO] COMBO 2 TẢ QUẦN MOLFIX...</text>
							</view>

							<view class="price">
								<text>335.999đ</text>
							</view>

							<view class="free-sample-btn">
								<text>{{t('index.FreeSample')}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-else>
				<view class="section">
					<view class="section-title">{{ t('common.historySearch') }}</view>
					<view class="history-tags">
						<view class="history-tag">{{ t('common.Home') }}</view>
						<view class="history-tag">{{ t('common.Company') }}</view>
						<view class="history-tag">{{ t('common.School') }}</view>
					</view>
				</view>
				<view class="section">
					<view class="section-title">{{ t('searchPage.hotSearch') }}</view>
					<view class="hot-tags">
						<view class="hot-tag" v-for="(tag, index) in hotTags" :key="index">{{ tag }}</view>
					</view>
					<view class="see-more" @click="seeMore">
						<text>{{t('searchPage.seeMore')}}</text>
						<tn-icon name="down" size="24"></tn-icon>
					</view>
				</view>
				<view class="section">
					<view class="section-title">{{ t('common.hotSearch') }}</view>
					<view class="product-grid">
						<view class="product-item" v-for="(product, index) in products" :key="index">
							<image :src="product.image" mode="aspectFill" class="product-image"></image>
							<view class="product-title">{{ product.title }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		useI18n
	} from 'vue-i18n'

	const {
		t
	} = useI18n()

	const isShowProduct = ref(false)

	const products = ref([{
			type: 'skincare',
			title: 'Beauty&Personal Care',
			image: '../../static/1.jpg',
			features: [
				'Improves Skin Elasticity',
				'Smoothes Wrinkles',
				'Increases Collagen Stimulation'
			]
		},
		{
			type: 'toothbrush',
			image: '../../static/1.jpg',
			title: '3 PERSONALIZE DMODES'
		},
		{
			type: 'skincare',
			title: 'Beauty&Personal Care',
			image: '../../static/1.jpg',
			features: [
				'Improves Skin Elasticity',
				'Smoothes Wrinkles',
				'Increases Collagen Stimulation'
			]
		},
		{
			type: 'toothbrush',
			image: '../../static/1.jpg',
			title: '3 PERSONALIZE DMODES'
		}
	]);
	const searchText = ref('');
	const hotTags = ref(['son', 'áo', 'giày', 'dép', 'váy', 'túi', 'áo khoác', 'cushion', 'botare', 'kem rửa']);
	const showSearch = (val) => {
		console.log('showSearch', val);
		isShowProduct.value = true
		if (val) {
			isShowProduct.value = false
		}
	}
	const showSearchResult = (val) => {
		console.log('showSearchResult', val);
		isShowProduct.value = true
	}
	const goback = () => {
		console.log('goback');
		uni.navigateBack()
	}
	const seeMore = () => {
		uni.showToast({
			title: 'Loading more items...',
			icon: 'none'
		});
	};
	const bgHeight = ref(20); // 初始背景高度
	const startY = ref(0)
	const contentMarginTop = ref(0); // 让内容同步向下移动
	// 记录起始触摸点
	const handleTouchStart = (e) => {
		startY.value = e.touches[0].pageY;
	};

	// 计算下拉位移
	const handleTouchMove = (e) => {
		let moveY = e.touches[0].pageY - startY.value;
		// contentMarginTop.value = moveY
		if (moveY > 0) {
			bgHeight.value = Math.min(20 + moveY, 100); // 背景最大高度 450px
			contentMarginTop.value = Math.min(0 + moveY, 100); // 内容同步向下移动
		}
	};

	// 松手后恢复
	const handleTouchEnd = () => {
		const timer = setInterval(() => {
			if (bgHeight.value > 20) {
				bgHeight.value -= 5;
				contentMarginTop.value -= 5;
			} else {
				clearInterval(timer);
			}
		}, 10);
	};
</script>

<style lang="scss">
	.search-container {
		min-height: 100vh;
		background: url("../../static/bg.png") no-repeat center center/cover;
		padding: 20rpx;
	}

	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* Category tabs */
	.category-tabs {
		display: flex;
		border-bottom: 1px solid #eee;

		.tab {
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			font-size: 28rpx;
			color: #666;
			margin: 0 40rpx;

			&.active {
				color: #ff4d6a;
				border-bottom: 4rpx solid #ff4d6a;
			}
		}
	}

	/* Sub category tabs */
	.sub-category-tabs {
		display: flex;
		white-space: nowrap;
		padding: 20rpx 0;

		.sub-tab {
			display: inline-flex;
			align-items: center;
			padding: 0 30rpx;
			font-size: 26rpx;
			color: #666;

			&.active {
				color: #333;
				font-weight: bold;
			}
		}
	}

	/* Product grid */
	.product-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		padding: 20rpx;
	}

	/* Product card */
	.product-card {
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		.product-image {
			position: relative;
			height: 320rpx;
			background-color: #f0f0f0;

			image {
				width: 100%;
				height: 100%;
			}

			.product-features {
				position: absolute;
				top: 20rpx;
				left: 20rpx;
				font-size: 22rpx;
				color: #333;
				font-weight: 500;

				.feature-item {
					line-height: 1.3;
				}
			}

			.product-title {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				text-align: center;
				color: #fff;
				font-weight: bold;
				font-size: 32rpx;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);

				.title-text {
					line-height: 1.3;
				}
			}
		}

		.product-info {
			padding: 20rpx;

			.commission-info {
				background-color: #fff0f3;
				padding: 6rpx 12rpx;
				border-radius: 6rpx;
				font-size: 22rpx;
				color: #ff4d6a;
				display: inline-block;
				margin-bottom: 10rpx;
			}

			.earnings {
				font-size: 26rpx;
				color: #ff4d6a;
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			.product-code {
				font-size: 24rpx;
				color: #333;
				margin-bottom: 10rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.price {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 16rpx;
			}

			.free-sample-btn {
				background-color: #ff4d6a;
				color: #fff;
				text-align: center;
				padding: 12rpx 0;
				border-radius: 8rpx;
				font-size: 26rpx;
			}
		}
	}

	.search-header {
		display: flex;
		align-items: center;
		margin-bottom: 60rpx;
		margin-top: 100rpx;

		.back-icon {
			// padding: 10rpx;
			margin-right: 40rpx;
		}

		.search-input-box {
			flex: 1;
			display: flex;
			padding: 0 10rpx;
			align-items: center;
			width: 618rpx;
			height: 70rpx;
			border-radius: 16rpx;
			border: 3rpx solid #000000;

			.tn-input {
				flex: 1;
			}

			.search-btn {
				background-color: #000;
				color: #fff;
				padding: 6rpx 20rpx;
				border-radius: 20rpx;
				font-size: 24rpx;
			}
		}
	}

	.section {
		margin-bottom: 30rpx;

		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}
	}

	.history-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;

		.history-tag {
			padding: 10rpx 30rpx;
			background-color: #fff;
			border-radius: 16rpx;
			font-size: 26rpx;
			color: #666;
		}
	}

	.hot-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin-bottom: 20rpx;

		.hot-tag {
			padding: 10rpx 30rpx;
			background-color: #fff;
			border-radius: 16rpx;
			font-size: 26rpx;
			color: #666;
		}
	}

	.see-more {
		display: flex;
		gap: 10rpx;
		color: #ff6b81;
		font-size: 26rpx;
		margin-top: 10rpx;
		width: 272rpx;
		height: 52rpx;
		background: rgba(253, 45, 85, 0.2);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		line-height: 52rpx;
		align-items: center;

		text {
			// width: 188rpx;
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #FD2D55;
			line-height: 28rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-left: 20rpx;
		}
	}

	.product-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;

		.product-item {
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;
			display: flex;
			padding: 20rpx;

			.product-image {
				width: 96rpx;
				height: 96rpx;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				// margin-right: 12rpx;
			}

			.product-title {
				width: 184rpx;
				height: 64rpx;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 33rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				white-space: pre-wrap;
				padding: 0 12rpx;
				box-sizing: border-box;
			}
		}
	}
</style>